<template>
  <div>
    <div class="form-the-container basic-form">
      <div class="card-box">
        <div class="card-title full">其他物业信息</div>
        <el-form ref="propForm" :model="propForm.otherProperty" class="form-wrap" label-position="top" size="small" :rules="otherProperty_rules">
          <el-form-item label="其他物业名称" prop="otherName">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="propForm.otherProperty.otherName" />
          </el-form-item>

          <el-form-item label="所属物业" prop="propertyName">
            <el-input v-halfCharCode placeholder="请选择所属物业" v-model="propForm.otherProperty.propertyName" @focus="$refs.propertyList.show()" />
          </el-form-item>

          <el-form-item label="建筑面积(m²)" prop="buildArea">
            <el-input v-halfCharCode v-model="propForm.otherProperty.buildArea" placeholder="请输入建筑面积" :disabled="theSelectedProperty" />
          </el-form-item>

          <el-form-item label="管理权属" prop="manageUnit">
            <el-select clearable v-model="propForm.otherProperty.manageUnit" placeholder="请选择管理所" :disabled="theSelectedProperty">
              <el-option v-for="item in manageUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
            <el-button size="mini" type="primary" @click="$refs.positionDialog.show()" style="position: absolute;top: -38px;left: 70px;">选择</el-button>
            <el-button size="mini" v-if="propForm.otherProperty.mapCoordinates" @click="$refs.positionDialog.show('preview')" style="position: absolute;top: -38px;left: 120px;">查看</el-button>
            <el-input v-model="propForm.otherProperty.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location" :disabled="theSelectedProperty" />
          </el-form-item>

          <el-form-item label="地图围栏" prop="fenceCoordinates" style="position: relative;">
            <el-button size="mini" type="primary" @click="$refs.positionDialog.show('pen')" style="position: absolute;top: -38px;left: 70px;">选择</el-button>
            <el-button size="mini" v-if="propForm.otherProperty.fenceCoordinates" @click="$refs.positionDialog.show('pen-preview')" style="position: absolute;top: -38px;left: 120px;">查看</el-button>
            <el-input v-model="propForm.otherProperty.fenceCoordinates" placeholder="请输入地图围栏" suffix-icon="el-icon-map-location" :disabled="theSelectedProperty" />
          </el-form-item>

          <el-form-item label="VR地址" prop="vrUrl">
            <el-input v-halfCharCode placeholder="请输入VR地址" v-model="propForm.otherProperty.vrUrl" :disabled="theSelectedProperty" />
          </el-form-item>

          <el-form-item label="录入人" prop="gatherPeople">
            <el-input v-halfCharCode placeholder="请输入录入人" v-model="propForm.otherProperty.gatherPeople" :disabled="theSelectedProperty" />
          </el-form-item>
          <el-form-item label="录入部门" prop="deptName">
            <el-select clearable v-model="propForm.otherProperty.deptName" placeholder="请选择录入部门" :disabled="theSelectedProperty">
              <el-option v-for="item in deptNames" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业地址" prop="cityCode" class="full">
            <el-row :gutter="10">
              <el-col :span="4">
                <div></div>
                <el-input v-halfCharCode v-model="cityCode.label" placeholder="请选择市" :disabled="theSelectedProperty" />
              </el-col>
              <el-col :span="4">
                <el-select clearable placeholder="请选择区(县)" v-model="propForm.otherProperty.countyCode" :disabled="theSelectedProperty">
                  <el-option v-for="item in (this.propForm.otherProperty.cityCode === '') ? [] : districtCollection" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select clearable placeholder="请选择街道(乡)" v-model="propForm.otherProperty.projectStreet" @change="handleChangeStreet" :disabled="theSelectedProperty">
                  <el-option v-for="item in (this.propForm.otherProperty.countyCode === '') ? [] : streets" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select placeholder="请选择社区(村)" v-model="propForm.otherProperty.communityName" @change="handleChangeCommunity" :disabled="theSelectedProperty">
                  <el-option v-for="item in (this.propForm.otherProperty.projectStreet === '') ? [] : communityNameStreet" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-input v-halfCharCode v-model="propForm.otherProperty.addressInfo" placeholder="请输入道路及门牌号" :disabled="theSelectedProperty" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-halfCharCode v-model="propForm.otherProperty.remarks" maxlength="333" placeholder="请输入备注" />
          </el-form-item>
          <div class="card-title full">文件上传</div>
          <div style="padding: 20px 20px">
            <v-upload type="file" ref="myUpload" class="full" :url="fileUploadUrl" :busId="id" :modelType="modelType" @onSuccess="onSuccess" v-model="uploadFileList" :isView="false"></v-upload>
          </div>
        </el-form>
        <!-- 地图坐标选择弹窗 -->
        <positionDialog ref="positionDialog" :position="propForm.otherProperty.mapCoordinates" :pen="propForm.otherProperty.fenceCoordinates" @changeMessage="resetPosition" />
        <propertyList ref="propertyList" @getPropertyObject="getPropertyObject" />
      </div>
    </div>

    <div class="cFormFoot">
      <el-button type="primary" v-throttle="[submitForm]">保存</el-button>
    </div>
  </div>
</template>
<script src='./other_property_form.js'>
</script>

<style scoped lang="scss">
@import "./other_property_form";
</style>
